<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ include file="/WEB-INF/jsp/common/page_init.jsp"%>
<head>
<meta charset="utf-8">
<title>layer2.1 demo</title>
<style type="text/css">
	html, body {
		margin: 0;
		padding: 0;
	}
	.bg{
		background-color:#f8f8f8;
		border-color:#f8f8f8
	}
</style>
<script type="text/javascript">
$(function(){
	$("#demo-tc-1").click(function(){
		layer.msg('你确定你很帅么？', 
				{
				time: 0, //不自动关闭
				//icon: 6,
				area:['250px'],
				btn: ['必须啊'],
				yes: function(index){
				     layer.close(index);
						    }
				});
	});
	$("#demo-tc-2").click(function(){
		//信息框-例2
		layer.msg('你确定你很帅么？', {
			area:['250px', '100px'],
		    time: 0 //不自动关闭
		    ,btn: ['必须啊', '丑到爆']
		    ,yes: function(index){
		        layer.close(index);
		    }
		});
		
	});
	$("#demo-tc-3").click(function(){
		//信息框-例2
		layer.msg('这是成功', {
            icon: 3,
            area:['250px'],
            time: 0 //不自动关闭
            ,btn: ['确    定','取    消']
        });
		$("div[type='dialog']").addClass("layui-layer-hui");
		
	});
	$("#demo-tc-4").click(function(){
		//信息框-例2
		layer.msg('这是警告', {
            icon: 0,
            area:['250px'],
            time: 0 //不自动关闭
            ,btn: ['确    定']
        });
		$("div[type='dialog']").addClass("layui-layer-hui");
	});
	$("#demo-tc-5").click(function(){
		//信息框-例2
		layer.msg('这是成功', {
            icon: 1,
            area:['250px'],
            time: 0 //不自动关闭
            ,btn: ['确    定']
        });
		$("div[type='dialog']").addClass("layui-layer-hui");
	});
	$("#demo-tc-6").click(function(){
		//信息框-例2
		layer.msg('这是成功', {
            icon: 1,
            area:['250px'],
            time: 0 //不自动关闭
        });
	});
	$("#demo-tc-7").click(function(){
		//信息框-例2
		layer.msg('这是错误', {
            icon: 2,
            skin:'layui-layer-zq',
            area:['250px'],
            time: 0 //不自动关闭
            ,btn: ['确    定','取消']
        });
		$("div[type='dialog']").addClass("layui-layer-hui");
	});
	$("#demo-loading-1").click(function(){
		//加载层-默认风格
		layer.load();
		//此处演示关闭
		setTimeout(function(){
		    layer.closeAll('loading');
		}, 2000);
	});
	$("#demo-loading-2").click(function(){
		//加载层-风格1
		layer.load(1);
		//此处演示关闭
		setTimeout(function(){
		    layer.closeAll('loading');
		}, 2000);
	});
	$("#demo-loading-3").click(function(){
		//加载层-风格2
		layer.load(2);
		//此处演示关闭
		setTimeout(function(){
		    layer.closeAll('loading');
		}, 2000);
	});
	$("#demo-page-1").click(function(){
		//iframe层-父子操作
		var html="<div>11111</div>";
		layer.open({
			title:'这是标题',
		    type: 1,
		    area: ['700px', '530px'],
		    fix: false, //不固定
		    maxmin: true,
		    content: html,
		    skin:'layui-layer-zq'
		});
	});
	$("#demo-page-2").click(function(){
		//iframe层-父子操作
		var html="<div>11111</div>";
		layer.open({
			title:'这是标题',
		    type: 2,
		    area: ['700px', '530px'],
		    fix: false, //不固定
		    maxmin: true,
		    content: 'http://www.baidu.com',
		    skin:'layui-layer-zq'
		});
	});
//////////////////////////////////apex layer demo ///////////////////////////	
	$("#apex-demo-tc-1").click(function(){
		//apexLayer.Warn("这里有警告，不能通过",function(){alert(123)});
		apexLayer.Warn("这里有警告，不能通过");
	});
	$("#apex-demo-tc-2").click(function(){
		//apexLayer.Success("这里有警告，不能通过",function(){alert(123)});
		apexLayer.Success("成功，可以通过");
	});
	$("#apex-demo-tc-3").click(function(){
		//apexLayer.Error("这里有警告，不能通过",function(){alert(123)});
		apexLayer.Error("错误，禁止通过");
	});
	$("#apex-demo-tc-4").click(function(){
		apexLayer.Confirm("成功，可以通过成功，可以通过成功，可以通过可以通","","前进","后退",function(){alert(123)},function(){alert(123)});
	});
	$("#apex-demo-tc-5").click(function(){
		apexLayer.Msg("成功，可以通过",2000,function(){alert(123)});
	});
	$("#apex-demo-loading-1").click(function(){
		//apexLayer.Loading(2000);
		apexLayer.Loading(0,'正在导入');
	});
	$("#apex-demo-page-1").click(function(){
		var html="<div>11111</div>";
		apexLayer.OpenFrame({
			title:'测试html标签窗口',
			width:750,
			height:500,
			//maxmin:false,
			closeBtn:1,
			scrollbar:false,
			content:html
			
		});
	});
	$("#apex-demo-page-2").click(function(){
		apexLayer.OpenFrame({
			title:'测试html标签窗口',
			width:750,
			height:500,
			type:2,
			//maxmin:false,
			closeBtn:1,
			scrollbar:false,
			content:"http://www.baidu.com"
			
		});
	});
	$("#apex-demo-tip-1").click(function(){
		apexLayer.Tips({
			message:'测试tip内容',
			more:false,
			guide:1,
			object:'#apex-demo-tip-1',
			time:2000
		});
	});
	$("#apex-demo-ajaxSuccess").click(function(){
		Ajax({
			url: contextPath + "/demo/ajaxSuccess",
			isMask : true,
			data: {
			},
			success: function (data) {
				if (data.success) {
					apexLayer.Success(data.note);
				} else {
					apexLayer.Warn(data.note);
				}
			}
		});
	});
	$("#apex-demo-ajaxError").click(function(){
		Ajax({
			url: contextPath + "/demo/ajaxError",
			isMask : true,
			data: {
			},
			success: function (data) {
				if (data.success) {
					apexLayer.Success(data.note);
				} else {
					apexLayer.Warn(data.note);
				}
			}
		});
	});
})
</script>
</head>

<body>
<div align="center" class="font-20 pd10">
layer2.1 demo
<br>
<a id="demo-tc-1">弹窗-警告</a><br>
<a id="demo-tc-2">弹窗-确定取消</a><br>
<a id="demo-tc-3">弹窗-确定取消(带图标)</a><br>
<a id="demo-tc-4">弹窗-警告（带图标）</a><br>
<a id="demo-tc-5">弹窗-成功（带图标）</a><br>
<a id="demo-tc-6">弹窗-成功（带图标，没按钮）</a><br>
<a id="demo-tc-7">弹窗-错误（带图标）</a><br>
<a id="demo-loading-1">加载中-默认风格</a><br>
<a id="demo-loading-2">加载中-风格1</a><br>
<a id="demo-loading-3">加载中-风格2</a><br>
<a id="demo-page-1">弹出页面层-1-本地html</a><br>
<a id="demo-page-2">弹出页面层-2-打开链接</a><br>
<hr>
apexLayer demo
<br>
<a id="apex-demo-tc-1">弹窗-警告</a><br>
<a id="apex-demo-tc-2">弹窗-成功</a><br>
<a id="apex-demo-tc-3">弹窗-错误</a><br>
<a id="apex-demo-tc-4">弹窗-确认框</a><br>
<a id="apex-demo-tc-5">弹窗-消息</a><br>
<a id="apex-demo-loading-1">加载中-默认风格</a><br>
<a id="apex-apex-demo-loading-2">加载中-风格1</a><br>
<a id="apex-demo-loading-3">加载中-风格2</a><br>
<a id="apex-demo-page-1">弹出页面层-1-本地html</a><br>
<a id="apex-demo-page-2">弹出页面层-2-打开链接</a><br>
<a id="apex-demo-tip-1">tip-1</a><br>
<a id="apex-demo-ajaxSuccess">ajax1 success</a><br>
<a id="apex-demo-ajaxError">ajax2 error</a><br>

</div>
</body>
</html>